<template>
  <el-drawer
    custom-class="zw_drawer"
    v-model.sync="drawer"
    :direction="direction"
    :size="width"
    @close="handleClose"
    @open="handleOpen"
  >
    <template #title>
      <div class="drawer_tit">
        {{ title }}
      </div>
    </template>
    <template #default>
      <div class="content">
        <el-scrollbar class="main"><slot></slot></el-scrollbar>
      </div>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  const drawer = ref(true)
  const title = ref('我是标题2')
  const direction = ref('rtl')
  const width = ref(800)
  const drawerMsg = ref('提交')
  const isShow = ref(true)
  const emit = defineEmits({
    submit: null
  })
  const handleClose = () => {
    drawer.value = false
  }
  const handleOpen = () => {
    drawer.value = true
  }
  const confirmClick = () => {
    emit('submit')
  }
  defineExpose({
    drawer,
    width,
    drawerMsg,
    title,
    isShow
  })
</script>
<style lang="scss">
  .zw_drawer {
    .drawer_tit {
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #33302d;
      font-size: 16px;
    }
    .content {
      position: relative;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      .main {
        position: absolute;
        height: calc(100% - 60px);
        width: 100%;
        top: 0;
        bottom: 60px;
        .el-scrollbar__view {
          height: 100%;
        }
      }
    }
  }
</style>
